<template>
  <div class="contain">
    <div class="content">
        <div v-for="item in itemsGet" :key="item.index">
            <div>催认领(2022年09月10日09点20分30秒)</div>
            <div>
                <div>处理人：张三</div>
                <div>联系电话：12345678910</div>
            </div>
            <div>国网回复的详....</div>
        </div>
        <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
    </div>
  </div>
</template>

<script>
import TableData from '@/utils/TableData.js';
import Pagination from '@/components/Pagination';
export default {
    components: {
        Pagination
    },
    data() {
        return {
            itemsGet: null,
            total: 0,
            listQuery: {
                page: 1,
                limit: 5,
                importance: undefined,
                title: undefined,
                type: undefined,
                sort: '+id'
            }
        }
    },
    methods: {
        getList(){
            let TableArray = []
            for(let i = (this.listQuery.page-1)*this.listQuery.limit;
            i < this.listQuery.page * this.listQuery.limit;i++){
                if(i < TableData.info.length){
                    TableArray.push(TableData.info[i]);
                }
            }
            this.itemsGet = TableArray;
            this.total = TableData.peopleGet.length;
        }
    },
    created () {
        this.getList();
    }
}
</script>

<style scoped>
.contain{
    width: 100%;
    border: 1px solid #EBEEF5;
}
.content{
    padding: 10px;
}
.content>div{
    padding: 10px;
}
.content>div>div:first-child{
    font-weight: 30px;
    font-size: large;
}
.content>div>div:nth-child(2){
    display: flex;
}
.content>div>div:nth-child(2)>div:last-child{
    margin-left: 10px;
}
</style>